<template>
	<view class="my">
		<image :src="_static('/images/Mask group@2x.png')	" class="myback" mode=""></image>
		<view class="headertop" :style="{'background':back1}">
			<view class="box"
				:style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px','display':'flex','align-items': 'center'}">
			</view>
		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">

		</view>
		<view class="userCenter" @click="gopage('个人中心')">
			<view class="leftuser">
				<image :src="userobj['avatar']" class="avatar" mode="widthFix"></image>
				<view class="usertexts">
					<view class="t1">
						{{userobj['nickname']||'未登录'}}
					</view>
					<view class="t2" v-if="userobj.mobile">
						{{userobj.mobile.slice(0,3)}}****{{userobj.mobile.slice(7,11)}}
					</view>
				</view>
			</view>
			<image :src="_static('/images/Group 11497@2x.png')" @click.stop="saoma" class="hexiaoicon" mode="">
			</image>
		</view>
		<view class="bottomcontent">
			<view class="moudls">
				<view class="boxss">
					<view class="box1" @click="gopage('健康档案')">
						<image :src="_static('/images/Rectangle 24610@2x(1).png')" class="box1img" mode=""></image>
						<view class="textline">
							<image :src="_static('/images/fFrame@2x(2).png')" mode="" class="icon">
							</image>
							<view class="tt">
								健康档案
							</view>
							<image :src="_static('/images/Frame@2x(2).png')" class="rarrow" mode="">
							</image>
						</view>
						<view class="xtitle">
							建议您的专属健康档案
						</view>
					</view>
					<view class="box1" @click="gopage('评估报告')">
						<image :src="_static('/images/Rectangle 24610@2x(1).png')" class="box1img" mode=""></image>
						<view class="textline">
							<image :src="_static('/images/Frame@2x(3).png')" mode="" class="icon"></image>
							<view class="tt">
								评估报告
							</view>
							<image :src="_static('/images/Frame@2x(2).png')" class="rarrow" mode="">
							</image>
						</view>
						<view class="xtitle">
							从风险等级到调理建议
						</view>
					</view>
					<view class="box1" @click="gopage('私人医生')">
						<image :src="_static('/images/Rectangle 24610@2x(1).png')" class="box1img" mode=""></image>
						<view class="textline">
							<image src="/static/images/Frame@2x.png" mode="" class="icon"></image>
							<view class="tt">
								私人医生
							</view>
							<image :src="_static('/images/Frame@2x(2).png')" class="rarrow" mode="">
							</image>
						</view>
						<view class="xtitle">
							您的健康，我来守护
						</view>
					</view>
					<view class="box1" @click="gopage('评估趋势')">
						<image :src="_static('/images/Rectangle 24610@2x(1).png')" class="box1img" mode=""></image>
						<view class="textline">
							<image :src="_static('/images/Frame@2x(5).png')" mode="" class="icon"></image>
							<view class="tt">
								评估趋势
							</view>
							<image :src="_static('/images/Frame@2x(2).png')" class="rarrow" mode="">
							</image>
						</view>
						<view class="xtitle">
							记录您的每一步抗敏之路
						</view>
					</view>
				</view>
				<view class="ordermoudles">
					<view class="orderline">
						<view class="lefttitl">
							<image :src="_static('/images/Group 11682@2x(1).png')" mode="" class="iconleft"></image>
							<span>我的订单</span>
						</view>
						<image :src="_static('/images/Frame@2x(6).png')" @click="gopage('订单列表','all')"
							class="arrowright" mode="">
						</image>
					</view>
					<view class="orderbox">
						<view class="itembopx" @click="gopage('订单列表','all')">
							<image :src="_static('/images/Frame@2x(7).png')" class="icon" mode=""></image>
							<span>全部订单</span>
						</view>
						<view class="itembopx" @click="gopage('订单列表','unpaid')">
							<view class="readucebox" v-if="ordernumobj['unpaid']">
								{{ordernumobj['unpaid']}}
							</view>
							<image :src="_static('/images/Frame@2x(11).png')" class="icon" mode="">
							</image>
							<span>待付款</span>
						</view>
						<view class="itembopx" @click="gopage('订单列表','nosend')">
							<view class="readucebox" v-if="ordernumobj['nosend']">
								{{ordernumobj['nosend']}}
							</view>
							<image :src="_static('/images/Frame@2x(10).png')" class="icon" mode="">
							</image>
							<span>待发货</span>
						</view>
						<view class="itembopx" @click="gopage('订单列表','noget')">
							<view class="readucebox" v-if="ordernumobj['noget']">
								{{ordernumobj['noget']}}
							</view>
							<image :src="_static('/images/Frame@2x(9).png')" class="icon" mode=""></image>
							<span>待收货</span>
						</view>
						<view class="itembopx" @click="gopage('售后订单','aftersale')">
							<view class="readucebox" v-if="ordernumobj['aftersale']">
								{{ordernumobj['aftersale']}}
							</view>
							<image :src="_static('/images/Frame@2x(8).png')" class="icon" mode=""></image>
							<span>退款/售后</span>
						</view>
					</view>
				</view>
				<image :src="_static('/images/Group 11705@2x.png')" class="ggimg" mode="widthFix" @click="stipgzh">
				</image>
				<view class="qitagn">
					<view class="qitagntop">
						<view class="lefttitl">
							<image :src="_static('/images/Group 11682@2x(1).png')" mode="" class="iconleft"></image>
							<span>其他功能</span>
						</view>
					</view>
					<view class="centerbox">
						<view class="itemboo" @click="gopage('过敏报告')">
							<image :src="_static('/images/Frame@2x(12).png')" mode=""></image>
							<span>过敏报告</span>
						</view>
						<view class="itemboo" @click="gopage('用药记录')">
							<image :src="_static('/images/Frame@2x(13).png')" mode=""></image>
							<span>用药记录</span>
						</view>
						<view class="itemboo" @click="gopage('地址管理')">
							<image :src="_static('/images/Frame@2x(14).png')" mode=""></image>
							<span>地址管理</span>
						</view>
						<view class="itemboo" @click="gopage('脱敏地图')">
							<image :src="_static('/images/Frame@2x(15).png')" mode=""></image>
							<span>脱敏地图</span>
						</view>
						<view class="itemboo" @click="gopage('反馈中心')">
							<image :src="_static('/images/Frame@2x(16).png')" mode=""></image>
							<span>反馈中心</span>
						</view>
						<view class="itemboo" @click="gopage('帮助中心')">
							<image :src="_static('/images/Frame@2x(17).png')" mode=""></image>
							<span>帮助中心</span>
						</view>
						<view class="itemboo" @click="gopage('客服中心')">
							<image :src="_static('/images/Frame@2x(18).png')" mode=""></image>
							<span>客服中心</span>
						</view>
						<!-- 	<view class="itemboo" @click="gopage('核销通道')">
							<image :src="_static('/images/Frame@2x(19).png')" mode=""></image>
							<span>核销通道</span>
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<up-popup :show="show" mode="center" :zoom="false">
			<view class="centerbox2">
				<image :src="_static('/images/removeicon.png')" class="closeicon" mode="" @click="show=false">
				</image>
				<view class="title">
					联系我们
				</view>
				<view class="centerdd" @click="makeCall(service_tel)">
					<span style="margin-left: 30rpx;">客服电话</span>
					<span style="margin-right: 30rpx;">{{service_tel}}</span>
				</view>
				<button open-type="contact" class="centerdd1">
					<span style="margin-left: 30rpx;">线上咨询</span>
					<image :src="_static('/images/Frjt.png')" style="margin-right: 30rpx;" class="rightarrow" mode="">
					</image>
				</button>


				<view class="btnqd" @click="show=false">
					确定
				</view>
			</view>
		</up-popup>
		<view class="" style="height: 200rpx;">

		</view>
		<userlogin @updata="getuser" ref="denglu"></userlogin>
		<Tabbar page="/pages/me/index"></Tabbar>
	</view>
</template>
<script setup>
	import userlogin from '@/components/getuser/getuser.vue'
	import Tabbar from '@/components/tabbar.vue'
	import {
		getCurrentInstance,
		onMounted,
		ref,
		reactive
	} from 'vue'

	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		$api
	} from '../../ulm';
	import {
		setToken,
		getToken,
	} from '@/ulm/utils/auth';
	import {
		_static
	} from '@/ulm/utils/url.js'
	const barHeight = ref('')
	const show = ref(false)
	const denglu = ref(null)
	const userflga = ref('')
	const service_tel = ref('')
	const back1 = ref('')
	const gzh_url = ref('')
	const userobj = ref({})
	const ordernumobj = ref({})
	const statusBarHeight = ref('')
	onShow(() => {
		if (getToken()) {
			getuser()
			userinfoinit()
		} else {
			userobj.value = {
				avatar: '',
			}
		}
		kefudianhua()
		initGzhUrl()
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#CAEEFF'
		} else {
			back1.value = ''
		}
	})

	function makeCall(phone) {

		uni.makePhoneCall({
			phoneNumber: phone,
			success: function() {
				console.log('拨打电话成功');
			},
			fail: function() {
				console.log('拨打电话失败');
			}
		});

	}
	async function ordernuminit() {
		const res = await $api.ordernum()
		if (res.code == 1) {
			ordernumobj.value = res.data
		}
	}

	function stipgzh() {
		uni.navigateTo({
			url: '/pages/index/webviewpage?url=' + gzh_url.value
		})
	}
	async function initGzhUrl() {
		const res = await $api.getGzhUrl()
		if (res.code == 1) {
			gzh_url.value = res.data.gzh_url
		}
	}
	async function userinfoinit() {
		const res = await $api.userinfo()
		if (res.code == 1) {
			userflga.value = res.data
		}
	}
	async function kefudianhua() {
		const res = await $api.serviceTel()
		if (res.code == 1) {
			service_tel.value = res.data.service_tel
		}
	}
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	async function getuser() {
		const res = await $api.userinfo1()
		if (res.code == 1) {
			userobj.value = res.data['userinfo']
			ordernuminit()
		}
	}

	function saoma() {
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		uni.scanCode({
			success: function(res) {
				const str = decodeURIComponent(res.path).replace('?', '&')
				let strArr = str.split('&')
				strArr = strArr.filter(item => item)
				const result = {}
				strArr.filter(item => {
					const key = item.split('=')
					result[key[0]] = key[1]
				})
				bindDoctorinit(result['scene'])
			}
		});
	}

	async function bindDoctorinit(id) {
		const res = await $api.bindDoctor({
			'doctor_id': id
		})
		if (res.code == 1) {
			uni.showToast({
				title: '绑定成功',
				icon: 'none'
			})
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}

	function gopage(str, type) {
		if (str == '帮助中心') {
			uni.navigateTo({
				url: '/sub_my/my/bangzhuCenter',
			});
			return
		}
		if (str == '客服中心') {
			show.value = true
			return
		}
		if (!getToken()) {
			denglu.value.DengLu()
			return
		}
		if (str == '反馈中心') {
			uni.navigateTo({
				url: '/sub_my/my/fankuilist',
			});
		} else if (str == '用药记录') {
			uni.navigateTo({
				url: '/sub_my/my/yyjl',
			});
		} else if (str == '核销通道') {
			uni.navigateTo({
				url: '/sub_my/my/hxtd',
			});
		} else if (str == '订单列表') {
			uni.navigateTo({
				url: '/sub_my/my/orderList?type=' + type,
			});
		} else if (str == '健康档案') {
			if (!userflga.value) {
				uni.navigateTo({
					url: '/sub_index/index/bianjigerenziliao'
				})
				return
			}

			uni.navigateTo({
				url: '/sub_index/index/gerenziliao',
			});

		} else if (str == '评估报告') {
			uni.navigateTo({
				url: '/sub_my/my/pinggubaogao',
			});
		} else if (str == '私人医生') {
			uni.navigateTo({
				url: '/sub_my/my/sirenys',
			});
		} else if (str == '评估趋势') {
			uni.navigateTo({
				url: '/sub_my/my/pingguqushi',
			});
		} else if (str == '过敏报告') {
			uni.navigateTo({
				url: '/sub_my/my/gmbg',
			});
		} else if (str == '核销通道') {
			uni.navigateTo({
				url: '/sub_my/my/pingguqushi',
			});
		} else if (str == '脱敏地图') {
			uni.navigateTo({
				url: '/sub_my/my/tuominditu',
			});
		} else if (str == '地址管理') {
			uni.navigateTo({
				url: '/sub_my/my/shdz',
			});
		} else if (str == '个人中心') {
			uni.navigateTo({
				url: '/sub_my/my/gerenziliao'
			})
		} else if (str == '售后订单') {
			uni.navigateTo({
				url: '/sub_my/my/shouhouorderList'
			})
		}

	}
</script>

<style lang="scss">
	page {
		background: #f7f8fa;
	}

	::v-deep .u-popup__content {
		background-color: rgba(255, 0, 0, 0) !important;
	}

	button {
		border: none !important;
		align-items: center;
		overflow: auto !important;
		background: none !important;
		background-color: none !important;
		background-size: 100% 138% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0rpx !important;
		-webkit-tap-highlight-color: none !important;
		overflow: hidden !important;

		&:after {
			background: none !important;
			border: none;
			background-color: none !important;
			display: none !important;
		}
	}

	.centerbox2 {
		width: 600rpx;
		background: linear-gradient(180deg, #CAEEFF 0%, #FFFFFF 23%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		position: relative;

		.closeicon {
			width: 42rpx;
			height: 42rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}

		.title {
			width: 100%;
			text-align: center;
			margin-top: 48rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #1D2129;
		}

		.centerdd1 {
			width: 536rpx;
			height: 84rpx;
			background: #F7F8FA !important;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F7F8FA;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-right: none !important;
			font-weight: 400;
			font-size: 28rpx;
			color: #1D2129;
			margin: auto !important;

			.rightarrow {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.centerdd {
			width: 536rpx;
			height: 84rpx;
			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F7F8FA;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: auto;
			margin-top: 70rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #1D2129;
			margin-bottom: 30rpx;
		}

		.wxkf {
			width: 536rpx;
			font-size: 28rpx;
			margin: auto;
			text-decoration: underline;
			color: #2AB4F5;
			background: none;
			position: absolute;
			text-align: right;
		}


		.btnqd {
			width: 520rpx;
			height: 74rpx;
			background: #2AB4F5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 74rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: auto;
			margin-top: 60rpx;
			margin-bottom: 30rpx;
		}
	}

	.my {
		width: 100%;
		overflow: hidden;
		position: relative;

		.myback {
			width: 100%;
			height: 392rpx;
			position: absolute;
			z-index: -1;
		}

		.headertop {
			width: 100%;
			position: fixed;
			top: 0%;
			overflow: hidden;
			transition: 0.5s;
			z-index: 9999;
		}

		.pagelefticon {
			width: 120rpx;
			height: 40rpx;
			z-index: 9999;
			margin-left: 30rpx;
		}

		.bottomcontent {
			width: 100%;
			overflow: hidden;
			background: #F7F8FA;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(71, 195, 255, 0.19);
			border-radius: 40rpx 40rpx 0rpx;
			margin-top: 28rpx;

			.moudls {
				width: 686rpx;
				margin: auto;
				margin-top: 28rpx;
				overflow: hidden;

				.qitagn {
					width: 100%;
					height: 356rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					overflow: hidden;
					margin-bottom: 32rpx;

					.qitagntop {
						width: 622rpx;
						margin-top: 28rpx;
						margin-left: 28rpx;
						display: flex;

						.lefttitl {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #1D2129;

							.iconleft {
								width: 34rpx;
								height: 20rpx;
								margin-right: 12rpx;
							}
						}
					}

					.centerbox {
						width: 626rpx;
						overflow: hidden;
						display: flex;
						flex-wrap: wrap;
						margin: auto;
						margin-top: 36rpx;

						.itemboo:nth-child(4n) {
							margin-right: 0rpx;
						}

						.itemboo {
							display: flex;
							flex-direction: column;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #86909C;
							margin-right: 92rpx;
							margin-bottom: 28rpx;

							image {
								width: 56rpx;
								height: 56rpx;
								margin-bottom: 20rpx;
							}
						}
					}
				}

				.ggimg {
					width: 686rpx;
					height: 86rpx;
					margin: 28rpx auto;
				}

				.ordermoudles {
					width: 686rpx;
					height: 220rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					overflow: hidden;

					.orderbox {
						width: 636rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin: auto;
						margin-top: 28rpx;

						.itembopx {
							display: flex;
							flex-direction: column;
							align-items: center;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #4E5969;
							position: relative;

							.readucebox {
								padding: 0 6rpx;
								position: absolute;
								font-size: 20rpx;
								color: #FFFFFF;
								top: 0%;
								right: 0%;
								line-height: 22rpx;
								height: 22rpx;
								background: #F53F3F;
								border-radius: 11rpx 11rpx 11rpx 11rpx;
							}

							.icon {
								width: 64rpx;
								height: 64rpx;
								margin-bottom: 16rpx;
							}
						}
					}

					.orderline {
						width: 622rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 28rpx;
						margin-left: 28rpx;

						.arrowright {
							width: 24rpx;
							height: 24rpx;
						}

						.lefttitl {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #1D2129;

							.iconleft {
								width: 34rpx;
								height: 20rpx;
								margin-right: 12rpx;
							}
						}
					}
				}

				.boxss {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;

					.box1 {
						width: 328rpx;
						height: 134rpx;
						position: relative;
						margin-bottom: 24rpx;

						.box1img {
							width: 328rpx;
							height: 134rpx;
							position: absolute;
						}

						.xtitle {
							margin-left: 24rpx;
							margin-top: 12rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #86909C;
							z-index: 99;
							position: absolute;
						}

						.textline {
							width: 260rpx;
							display: flex;
							align-items: center;
							margin-left: 24rpx;
							margin-top: 24rpx;

							.icon {
								width: 48rpx;
								height: 48rpx;
								z-index: 99;
							}

							.tt {
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;
								margin-left: 14rpx;
								z-index: 99;
							}

							.rarrow {
								width: 20rpx;
								height: 20rpx;
								z-index: 99;
								margin-left: 12rpx;
							}
						}
					}
				}
			}
		}

		.userCenter {
			width: 686rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			overflow: hidden;
			margin-top: 58rpx;
			align-items: center;

			.hexiaoicon {
				width: 52rpx;
				height: 52rpx;
			}

			.leftuser {
				width: 328rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.avatar {
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					border: 2rpx solid #FFFFFF;
				}

				.usertexts {
					width: 200rpx;
					margin-left: 32rpx;

					.t1 {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #000000;
					}

					.t2 {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #4E5969;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
		}
	}
</style>